<template>
    <div class="all">
    <div class="title">
    <span>请输入查询条件</span>
    </div>
    <el-divider id="bottomdivider"></el-divider>
    <el-form :model="form" label-width="200px"  >
    <el-form-item label="航班号：" class="lab" >
        <el-col :span="11">
        <el-input v-model="form.name" style="width:300px" placeholder="请填写航班号"></el-input>
         </el-col>
         <div v-if="form.name.length==0" class="mes">
          *请输入航班号
        </div>
    </el-form-item>
    <el-form-item label="丢失物品类型：">
        <el-col :span="11">
        <el-select v-model="form.region" placeholder="请选择物品类型">
        <el-option label="行李箱" value="Box"></el-option>
        <el-option label="电子产品" value="Electronics"></el-option>
        </el-select>
        </el-col>
        <el-col :span="1">&nbsp&nbsp&nbsp 
        </el-col>
        <el-col :span="11">
          <div v-if="form.region.toString().length==0" class="mes">
          *请选择丢失物品类型
        </div>
        </el-col>
    </el-form-item>
    <el-form-item label-width="500px">
        <el-button type="primary" @click="dialogVisible = true">查询</el-button>

    </el-form-item>
    </el-form>
      <el-dialog
      v-model="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div v-if="form.name.length == 0 " class="title2">提示</div>
      <div v-else class="title2">请确定是否为您的遗失物</div>
      <div v-if="form.name.length == 0 "  class="mess"><span font-size="100px">未输入航班查询失败</span></div>
      <div v-else-if="form.region.toString()=='Box'" style="height:170px"> <img :src='imgUrl'></div>
      <div v-else-if="form.region.toString()=='Electronics'" style="height:200px"><img :src='phone'> </div>
      <div v-else class="mess"><span>请选择丢失物品类型</span></div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="open1" v-if="form.name.length !== 0 && form.region.toString().length !==0">不是我的</el-button>
          <el-button type="primary" @click="open2" v-if="form.name.length !== 0 && form.region.toString().length !==0">是我的</el-button>
          <el-button @click="dialogVisible =false" type="primary" v-else>关闭</el-button>
        </span>
      </template>
    </el-dialog>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
        },
        dialogVisible: false,
        imgUrl:require("@/assets/img/Luggage.jpg"),
        phone:require("@/assets/img/phone.jpg"),
      }
    },
     methods: {
      handleClose(done) {done();
      },
      search(){
          this.dialogVisible = true;
      },
      open1() {
        this.dialogVisible=false,
        this.$alert('很抱歉没有相应的遗失物', 'Sorry', {
          confirmButtonText: '确定',
        });
      },
      open2() {
        this.dialogVisible=false,
        this.$alert('请联系客服进行物品认领', 'Message', {
          confirmButtonText: '确定',
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
.title{
    height:30px;
    line-height: 30px;
    margin-bottom: 20px;
    font-size: 20px;
    color:rgb(70,109,161);
}
.all{
   padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
}
.lab .el-form-item__lable {
    color:red;
  
  } 
.mes{
  color:red;
  font-size: 5px;
}
.el-button--primary {
  color: #FFF;
  background-color:rgb(149,177,236);
  border-color:rgb(149,177,236);
}

:deep(.el-dialog) {
  margin-top: 20px !important;
  text-align: center;
  width: 500px !important;
  padding-bottom: -150px;
  
  .el-dialog__footer{
    height: 200px;
    line-height: 200px;
  }
  
}
.title2{
   color:rgb(70,109,161);
   font-size: 20px;
  margin-bottom: 100px;
  height: 10px;
  line-height: 10px;}
.mess{
  height: 10px;
  font-size: 15px;
  line-height: 10px;
}
</style>